<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
      <!--(book,index) in books  遍历并且得到下标-->
      <!--key的作用主要是为了高效的更新虚拟DOM-->
       <div v-for="(book,index) in books" v-bind:key="index">
           {{index}}>>>>>>>>>{{book.name}}>>>>>>>>>{{book.author}}
       </div>

       <!--   遍历对象     (v,k,i)  值,键,下标   -->
        <div v-for="(v,k,i) in site">
            {{i}}>>>>>>>>>{{k}}>>>>>>>>>{{v}}
        </div>

  </div>

<script>
    var app =new Vue({
      el:"#app",
        data: {
            books: [
                {
                    name: '三国演义',
                    author: '罗贯中'
                }, {
                    name: '红楼梦',
                    author: '曹雪芹'
                }, {
                    name: '西游记',
                    author: '吴承恩'
                }, {
                    name: '水浒传',
                    author: '施耐庵'
                }
            ],
            site: {
                url: 'www.javaboy.org',
                name: '江南一点雨',
                server: 'github'
            }
        }
    });

</script>
</body>
</html>